<script setup lang="ts">
import DemoBox from '@/components/DemoBox/DemoBox.vue';
import RichTextEditor from './RichTextEditor.vue';
import RichTextEditorCode from './RichTextEditor.vue?raw';
import PageLayout from '@/components/PageLayout.vue';
import { ref } from 'vue';

const html = ref('');
</script>

<template>
    <PageLayout>
        <DemoBox
            :code="RichTextEditorCode"
            :libs="['@wangeditor/editor-for-vue']"
            title="基本用法"
        >
            <RichTextEditor v-model:html="html" placeholder="请输入" />
            <template #description>
                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
            </template>
        </DemoBox>
    </PageLayout>
</template>
